<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>文档查重系统</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 2rem auto;
            padding: 20px;
        }

        .upload-box {
            border: 2px dashed #ccc;
            padding: 2rem;
            text-align: center;
            margin-bottom: 1rem;
        }

        #file-input {
            display: none;
        }

        .custom-file-upload {
            background: #4CAF50;
            color: white;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
        }

        #progress {
            height: 20px;
            background: #f0f0f0;
            margin: 1rem 0;
            display: none;
        }

        #progress-bar {
            width: 0%;
            height: 100%;
            background: #4CAF50;
            transition: width 0.3s ease;
        }

        #result {
            margin-top: 1rem;
        }

        .download-btn {
            background: #2196F3;
            color: white;
            padding: 10px 15px;
            text-decoration: none;
            border-radius: 5px;
            display: inline-block;
        }

        .error {
            color: #ff4444;
            margin-top: 1rem;
        }
    </style>
</head>
<body>
    <div class="upload-box">
        <h2>文档查重系统</h2>
        <input type="file" id="file-input" accept=".docx">
        <label for="file-input" class="custom-file-upload">选择文件</label>
        <p>支持格式: .txt / .docx / .pdf (最大 16MB)</p>
        <div id="selected-file"></div>
    </div>

    <div id="progress">
        <div id="progress-bar"></div>
    </div>

    <button onclick="uploadFile()" id="upload-btn">开始上传</button>

    <div id="result"></div>

    <script>
        const fileInput = document.getElementById('file-input');
        const selectedFileDiv = document.getElementById('selected-file');
        const uploadBtn = document.getElementById('upload-btn');
        const progressDiv = document.getElementById('progress');
        const progressBar = document.getElementById('progress-bar');
        const resultDiv = document.getElementById('result');

        // 显示选中的文件
        fileInput.addEventListener('change', function(e) {
            if (this.files.length > 0) {
                selectedFileDiv.innerHTML = `已选择文件：${this.files[0].name}`;
            }
        });

        async function uploadFile() {
            const file = fileInput.files[0];
            if (!file) {
                showError('请先选择文件');
                return;
            }

            // 验证文件类型
            if (!file.name.endsWith('.txt') && !file.name.endsWith('.docx') && !file.name.endsWith('.pdf')) {
                showError('仅支持 .txt / .docx / .pdf 文件');
                return;
            }

            // 验证文件大小 (16MB)
            if (file.size > 16 * 1024 * 1024) {
                showError('文件大小超过 16MB 限制');
                return;
            }

            // 准备上传
            uploadBtn.disabled = true;
            progressDiv.style.display = 'block';
            resultDiv.innerHTML = '';

            const formData = new FormData();
            formData.append('file', file);

            try {
                const response = await fetch('http://127.0.0.1:5000/api/document-plagiarism-check', {
                    method: 'POST',
                    body: formData
                });

                if (!response.ok) {
                    const error = await response.json();
                    throw new Error(error.error || '请求失败');
                }

                // 处理 Excel 文件
                const blob = await response.blob();
                const url = window.URL.createObjectURL(blob);
                
                resultDiv.innerHTML = `
                    <div class="success">
                        <p>查重完成！</p>
                        <a href="${url}" class="download-btn" download="查重结果.xlsx">
                            下载结果
                        </a>
                    </div>
                `;

            } catch (error) {
                showError(error.message || '上传过程中发生错误');
            } finally {
                uploadBtn.disabled = false;
                progressDiv.style.display = 'none';
                progressBar.style.width = '0%';
            }
        }

        function showError(message) {
            resultDiv.innerHTML = `<div class="error">错误：${message}</div>`;
        }
    </script>
</body>
</html>
